<template>
  <div class="app-container">
    <el-row>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="role-span">班级详情</span>
          <div id="opt" style="float: right">
            <!-- <el-button-group>
              <el-button type="plain" icon="el-icon-s-comment" size="small">点名</el-button>
            </el-button-group> -->
            <edit v-permission="['ADMIN', 'CLASS_ALL', 'CLASS_CREATE']" :data="viewForm"/>
          </div>
        </div>

        <el-form ref="viewForm" :model="viewForm" label-width="100px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="班级名称：" prop="className">
                {{ viewForm.className }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所授课程：" prop="courseName">
                {{ viewForm.courseName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="班级人数：" prop="capacity">
                {{ viewForm.capacity }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="班级类型：">
                {{ viewForm.classTypeTxt }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开班日期：">
                {{ viewForm.beginTime | formatDate('yyyy-MM-dd hh:mm') }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任课老师：" prop="teacherName">
                {{ viewForm.teacherName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="固定课时：">
                {{ viewForm.hasFixHour }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总课时：">
                {{ viewForm.classHour }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="已上课时：" prop="costHour">
                {{ viewForm.costHour }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-row>

    <el-card class="box-card" shadow="never" style="margin-top: 24px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="班级课表" name="first">
          <schedule-tab ref="scdTab" :class-id="classId"/>
        </el-tab-pane>
        
        <!--班级学员tab-->
        <el-tab-pane label="班级学员" name="second">
          <student-tab :class-id="classId" :is="studentTab"/>  
        </el-tab-pane>

        <!--排课条件tab-->
        <el-tab-pane label="班级排课" name="forth">
          <schedule-edit-tab :class-id="classId" :schedule-info-list="scheduleInfoList" :is="scheduleEditTab" @applySuccess="onScheduleApply"/>
        </el-tab-pane>

        <!--点名记录tab-->
        <el-tab-pane label="点名记录" name="third">
          <feedback-tab :class-id="classId" :is="feedbackTab"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getClassDetail } from '@/api/class'
import scheduleTab from './tabs/scheduleTab'
import edit from './module/edit'
// 异步组件
const feedbackTab = resolve => require(['../../components/students/student-feedback'], resolve)
const scheduleEditTab = resolve => require(['./tabs/scheduleEditTab'], resolve)
const studentTab = resolve => require(['./tabs/studentTab'], resolve)

export default {
  components: { edit, scheduleTab },
  data() {
    return {
      // 班级内容tab 
      feedbackTab: {},
      scheduleEditTab: {},
      studentTab: {},
      // 对象
      viewForm: {},
      scheduleInfoList: [],
      activeName: 'first',
      classId: 0,
      // 编辑还是增加
      formType: 'add',
      teachers: [],
      courses: []
    }
  },
  beforeMount() {
    this.classId = + this.$route.params.id
  },
  mounted() {
    this.getClassDetail()
  },
  methods: {
    getClassDetail() {
      const para = {
        classId: this.classId
      }
      getClassDetail(para).then(res => {
        this.viewForm = res.data
        if (res.data.scheduleInfoList != null) {
          this.applyStatus = res.data.scheduleChangeFlag
          this.scheduleInfoList = res.data.scheduleInfoList
        }
      })
    },
    // 切换tab懒加载
    handleClick(tab, event) {
      this.checkTab(tab.name)
    },
    checkTab(name) {
      switch (name) {
        case 'second':
          this.studentTab = studentTab
          break
        case 'third':
          this.feedbackTab = feedbackTab
          break
        case 'forth':
          this.scheduleEditTab = scheduleEditTab
          break
      }
    },
    handleEdit: function() {
      this.$refs.form.dialog = true
    },
    // 显示换课界面
    handleChange: function(index, row) {
      this.scheduleId = row.scheduleId
      this.$refs.changeScheduleDlg.showscheduleChange = true
    },
    onScheduleApply: function() {
      this.$refs.scdTab.getClassSchedule()
    }
  }
}
</script>

<style scoped >

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
